<template>
    <div>
        <el-dialog
        :title="btntype==0?'添加':'编辑'"
        :visible.sync="dialogVisible"
        width="50%"
        :before-close="handleClose">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="收支类型" prop="type">
                    <el-select v-model="ruleForm.type" placeholder="请选择收支类型">
                    <el-option label="全部" value=""></el-option>
                    <el-option label="充值" :value="0"></el-option>
                    <el-option label="优惠券" :value="1"></el-option>
                    <el-option label="理财服务退出" :value="2"></el-option>
                    <el-option label="购买直定盈" :value="3"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="用户名" prop="username">
                    <el-input v-model="ruleForm.username"></el-input>
                </el-form-item>
                <el-form-item label="籍贯" prop="address">
                    <el-cascader
                    v-model="ruleForm.address"
                    :options="options">
                    </el-cascader>
                </el-form-item>
                 <el-form-item label="收入" prop="income">
                    <el-input v-model.number="ruleForm.income"></el-input>
                </el-form-item>
                 <el-form-item label="支出" prop="pay">
                    <el-input v-model.number="ruleForm.pay"></el-input>
                </el-form-item>
                 <el-form-item label="账户现金" prop="money">
                    <el-input v-model.number="ruleForm.money"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="closedialog">取 消</el-button>
                <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import area from '../../../assets/area.json'
import {addDataApi,updateData} from '../../../api/homeApi'
export default {
    props: ['row','btntype'],
    data() {
        return {
            dialogVisible: true,
            options:area,
            ruleForm: {
                username: '',
                type: '',
                address:'',
                income: '',
                pay: '',
                money: ''
            },
            rules: {
                username: [
                    { required: true, message: '请输入活动名称', trigger: 'blur' },
                ],
                type: [
                    { required: true, message: '请输入收支类型', trigger: 'change' }
                ],
                address: [
                    { required: true, message: '请输入籍贯', trigger: 'change' }
                ],
                income: [
                    { required: true, message: '请输入收入', trigger: 'blur' }
                ],
                pay: [
                    { required: true, message: '请输入支出', trigger: 'blur' }
                ],
                money: [
                    { required: true, message: '请输入余额', trigger: 'blur' }
                ]
        
            }
        };
    },
    mounted () {
        console.log(this.row);
         this.ruleForm = JSON.parse(JSON.stringify(this.row)) //赋值  深拷贝
    },
    methods: {
        getAddressData(address,area){
            //把address地址格式转换成贵州省 安顺市 西秀区
            return address.map(item=>{
                for(var val of area){
                    if(val.value == item){
                        area = val.children
                        return val.label
                    }
                }
            })
        },
      closedialog(){
        this.$emit('closedialog')
      },
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
            this.closedialog();
          })
          .catch(_ => {});
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
                 //[130000 130200 130203] 转换成 贵州省 安顺市 西秀区
                var newaddress = this.getAddressData(this.ruleForm.address,area)
                // console.log(newaddress);
                this.ruleForm.address = newaddress.join(' ');
                if(this.btntype==0){ //添加逻辑
                    addDataApi(this.ruleForm).then(res=>{
                        if(res.code==200){
                            this.$emit('shuaxin');
                            this.$emit('closedialog')
                        }
                    })
                }else{  //更新逻辑
                    updateData(this.ruleForm).then(res=>{
                        // console.log(res);
                        if(res.code==200){
                            this.$emit('shuaxin');
                            this.$emit('closedialog')
                        }
                    })
                }
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      }
    }
}
</script>

<style>

</style>